import React from "react";
import * as THREE from 'three';

class HelloWorld extends React.Component {
    render(): React.ReactNode {
        return (
            <div>
                <h3>画线</h3>
                <div id="demo-draw-line"/>
            </div>
        )
    }

    componentDidMount(): void {
        const width = 800;
        const height = 500;
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 渲染器的大小尺寸
        renderer.setSize(width, height);

        const $el = document.getElementById('demo-draw-line');
        if ($el) {
            $el.appendChild(renderer.domElement)
        }


        /**
         * 第一个参数：视野角度（FOV）
         * 第二个参数:长宽比（aspect ratio）
         * 第三个参数：远剪切面
         * 第四个参数：近剪切面
         */
        const camera = new THREE.PerspectiveCamera(100, width / height, 0.1, 1000);
        camera.position.set(0, 0, 50);
        camera.lookAt(0, 0, 0);

        const scene = new THREE.Scene();
        const material = new THREE.LineBasicMaterial({color: 0x0000ff});
        const geometry = new THREE.BufferGeometry();
        const vertices = new Float32Array([
            -10, 0, 0,
            0, 10, 0,
            10, 0, 0,
        ])
        geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
        const line = new THREE.Line(geometry, material);
        scene.add(line);
        renderer.render(scene, camera);

    }
}

export default HelloWorld;
